/**
 * Created by yujianfu on 2016/11/10.
 */
import * as React from 'react'
import {Card, Icon} from 'antd'
import {fetchPost} from '../../../../../utils/request'
import styles from '../../../../finance/photoCheck/common/detail/Index.less'
import Styles from '../../../../finance/common/detail/Index.less'
import 'react-viewer/dist/index.css'
import ReactJson from 'react-json-view'

class KycAuthResult extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userId: props.userId,
      tradeNo: props.tradeNo,
      kycType: null,
      stepType: props.stepType,
      list: null,
      dlResult: null,
    }
  }

  componentWillReceiveProps(props) {
    if (this.state.userId != props.userId || this.state.tradeNo != props.tradeNo) {
      this.setState({
        userId: props.userId,
        tradeNo: props.tradeNo
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount() {
    if (this.state.userId && this.state.tradeNo) {
      this.getData()
    }
  }

  getData() {
    //kyc 爬虫结果 于20190724暂停 这里就不展示了 少查询一次
    if (false && this.state.tradeNo != null) {
      fetchPost(`/user/${this.state.tradeNo}/kyc/auth/result`, {}).then(res => {
        if (res.code === 0 && res.data) {
          this.setState({
            list: res.data.list,
            kycType: res.data.kycType,
            dlResult: res.data.dlResult,
          })
        } else {
          this.setState({
            list: null,
            dlResult: null,
            kycType: null,
          })
        }
      })
    } else {
      this.setState({
        list: null,
        dlResult: null,
        kycType: null,
      })
    }
  }

  renderKycAuthResult() {
    if (this.state.list == null && this.state.dlResult == null) {
      return <span className="no-data"><Icon type='frown-o'/>No data</span>
    }

    let list = this.state.list;
    let kycType = this.state.kycType;
    let dlResult = this.state.dlResult;
    let result = [];

    if (kycType == 'voter') {
      list.map(item => {
        result.push(
          <div className={Styles.oneLineContent} key={Math.random().toString(16).substring(2)}>
            <span style={{width: '20%'}}>{item.key}</span>
            :
            <span style={{width: '80%', paddingLeft: 5}}>
                {item.value == null ? <span> </span> : item.value}
              </span>
          </div>
        )
      });
    } else if (kycType == 'dl') {
      for (let item in dlResult) {
        if (item == 'validity' || item == 'classList') {
          result.push(
            <div className={Styles.oneLineContent} key={Math.random().toString(16).substring(2)}>
              <ReactJson src={JSON.parse(dlResult[item])}
                         name={item.toUpperCase()}
                         collapsed={true}
                         enableClipboard={false}
                         displayDataTypes={false}
                         displayObjectSize={false}
                         iconStyle="square"
              />
            </div>
          )
        } else if (item == 'userCode') {
        } else {
          result.push(
            <div className={Styles.oneLineContent} key={Math.random().toString(16).substring(2)}>
              <span style={{width: '20%'}}>{item.replace(/([A-Z])/g, " $1").toUpperCase()}</span>
              :
              <span style={{width: '80%', paddingLeft: 5}}>
                {dlResult[item] == null ? <span> </span> : dlResult[item]}
              </span>
            </div>
          );
        }
      }
    }

    return result;
  }

  render() {
    if (this.state.list == null && this.state.dlResult == null) {
      return (
        <div className={styles.detailModule}>
          <Card
            title={this.state.kycType == null ? 'Kyc Auth Result [NONE]' : ('Kyc Auth Result [' + this.state.kycType + ']')}
            bodyStyle={{padding: 0, minHeight: 20, overflow: 'auto'}} noHovering={true}>
            <span className="no-data"><Icon type='frown-o'/>No data</span>
          </Card>
        </div>
      )
    }
    let slf = this
    return (
      <div className={styles.detailModule}>
        <Card
          title={this.state.kycType == null ? 'Kyc Auth Result [NONE]' : ('Kyc Auth Result [' + this.state.kycType + ']')}
          bodyStyle={{padding: 0, minHeight: 20, overflow: 'auto'}} noHovering={true}>
          {this.renderKycAuthResult()}
        </Card>
      </div>

    )
  }
}

export default KycAuthResult
